<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>弹出框</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </head>
      <body>
            <div class="container">
                  <a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">链接1</a>
                  <br/><br/><br/><br/><br/><br/>
                  <!-- 不同位置的弹出框 -->
                  <a href="#" data-toggle="popover" title="标题" data-placement="top" data-content="弹出框内容">点我</a>
                  <a href="#" data-toggle="popover" title="标题" data-placement="bottom" data-content="弹出框内容">点我</a>
                  <a href="#" data-toggle="popover" title="标题" data-placement="left" data-content="弹出框内容">点我</a>
                  <a href="#" data-toggle="popover" title="标题" data-placement="right" data-content="弹出框内容">点我</a>
                  <br/><br/>
                  <!-- 点击其他地方关闭弹出框 -->
                  <a href="#" data-toggle="popover" title="取消弹出框" data-trigger="focus" data-content="弹出框内容">点击其他地方关闭</a>
                  <br/><br/>
                  <!-- 覆盖显示，移开消失 -->
                  <a href="#" data-toggle="popover" title="标题" data-trigger="hover" data-content="一些内容">鼠标覆盖显示</a>
            </div>
      </body>
      <script>
            $(document).ready(function(){
                  $('[data-toggle="popover"]').popover();
            })
      </script>
</html>